<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath }/jsp/css/bootstrap.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/jsp/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/jsp/css/bootstrap-theme.min.css">
    <script src="${pageContext.request.contextPath }/jsp/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/jsp/js/bootstrap.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Register</title>
</head>
<body class="layout-background">
<nav class="navbar navbar-default nav-bar">
    <div class="layout-width" >
        <div class="navbar-header">
            <a href="./listMerchant" class="navbar-brand">ITA Order System</a>
        </div>
        <div class="pull-right" style="font-size: 20px;position: relative;top: 10px;right: 55px;">
	        <c:choose>
	        	<c:when test="${user != null }">
		            <label class="control-label">Hello: </label>
		            <a href="#">${user.cname }</a>
		            <div style="margin-left: 70px;margin-top: -8px;">
		                <a class="btn btn-danger btn-xs" href="./logout">Logout</a>
		            </div>
	        	</c:when>
	        	<c:otherwise>
	        		<div style="margin-left: 70px;margin-top: -8px;">
		                <a class="btn btn-primary btn-sm" href="./login">Login</a>
		            </div>
	        	</c:otherwise>
	        </c:choose>
        </div>
    </div>
</nav>
<br/>
<br/>
<br/>
<div class="container">
<div class="row" style="background-color: #fafcfe;border: 1px solid #dfe8f2;margin-bottom: 15px;overflow: hidden;">
    <div style="overflow: hidden;position: relative;right: -20%;">
        <h2>Register</h2>
    </div>
    <div class="col-md-9" style="margin: 20px 0 0 20px;">
        <form action="./registerServlet" method="POST">
            <div class="form-group">
                <label class="control-label col-md-3" style="text-align: right; margin-top: 6px;">Tel: </label>
                <div class="col-md-8">
                    <input class="form-control" id="tel" name="tel" type="text" placeholder="TelPhone" onkeyup="this.value=this.value.replace(/[^\d]/g,'')" maxlength=11>
                    <c:if test="${telError != null }">
			            <div style="margin-top: 5px;" class="alert alert-danger" role="alert">${telError }</div>
		            </c:if>
                </div>
            </div>
            <br/><br/><br/>
            <div class="form-group">
                <label class="control-label col-md-3" style="text-align: right; margin-top: 6px;">Name: </label>
                <div class="col-md-8">
                    <input class="form-control" id="cname" name="cname"  type="text" placeholder="Merchant Name">
                    <c:if test="${cnameError != null }">
			            <div style="margin-top: 5px;" class="alert alert-danger" role="alert">${cnameError }</div>
		            </c:if>
                </div>
            </div>
            <br/><br/>
            <div class="form-group">
                <label class="control-label col-md-3" style="text-align: right; margin-top: 6px;">Password: </label>
                <div class="col-md-8">
                    <input class="form-control" id="password" name="password"  type="password" placeholder="Password">
                    <c:if test="${passwordError != null }">
			            <div style="margin-top: 5px;" class="alert alert-danger" role="alert">${passwordError }</div>
		            </c:if>
                </div>
            </div>
            <br/><br/>
            <div class="form-group">
                <label class="control-label col-md-3" style="text-align: right; margin-top: 6px;">Confirm Password: </label>
                <div class="col-md-8">
                    <input class="form-control" id="confirmPassword" name="confirmPassword"  type="password" placeholder="Confirm Password">
		            <c:if test="${confirmPasswordError != null }">
			            <div style="margin-top: 5px;" class="alert alert-danger" role="alert">${confirmPasswordError }</div>
		            </c:if>
                </div>
            </div>
            <br/><br/>
            <div class="text-center">
                <button class="btn btn-primary" type="submit" style="width: 200px;">Register</button>
            </div>
            <br/><br/>
        </form>
    </div>
    <div>
        <img src="${pageContext.request.contextPath }/jsp/images/logo.jpg">
        <br/><br/>
        <p>This is website profile.</p>
        <p>This is website profile.</p>
        <p>This is website profile.</p>
        <p>This is website profile.</p>
    </div>
</div>
</div>
</body>
</html>